<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <link href="/asset/css/admin.css" rel="stylesheet" />
	<style id='panda-theme-color'></style>
</head>
<body class="theme-panda">
<div>
<div class="layui-card">
<div class="layui-card-body">
	<form class="layui-form toolbar">
		<div class="layui-form-item">
		<div class="layui-inline">
			<div class="layui-input-inline">
				<input type="text" name="keywords" placeholder="请输入人员姓名/手机号等" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<div class="layui-input-inline">
				<select name="status" id="status" lay-verify="" lay-search="" lay-filter="status"><option value="">【请选择状态】</option><option value="1">正常</option><option value="2">禁用</option></select><div class="layui-form-select"><div class="layui-select-title"><input type="text" placeholder="【请选择状态】" value="" class="layui-input"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">【请选择状态】</dd><dd lay-value="1" class="">正常</dd><dd lay-value="2" class="">禁用</dd></dl></div>
			</div>
		</div>
		<div class="layui-inline">
			<div class="layui-input-inline" style="width: auto;">
				<button class="layui-btn layui-btn-primary layui-btn-sm" lay-submit="" lay-filter="searchForm" id="search"><i class="layui-icon">&#xe615;</i>搜索查询</button>
				<a class="layui-btn layui-btn-sm layui-btn-primary btnOption"    href="javascript:"  lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新增缴费</a>
				<!--a class="layui-btn layui-btn-sm layui-btn-primary" href="javascript:" id="excelImport"><i class="layui-icon layui-icon-add-1"></i>Excel导入</a-->
				<a class="layui-btn layui-btn-sm layui-btn-danger  btnBatchDrop" href="javascript:"  id="batchDrop" data-param="[]" lay-event="batchDrop"><i class="layui-icon layui-icon-delete"></i>批量删除</a>
				<input type="file" class="layui-btn layui-btn-sm layui-btn-primary" id="excelImport" multiple="multiple">
			</div>
		</div>
		</div>
	</form>

	<table class="layui-hide" id="tableList" lay-filter="tableList"></table>

	<script type="text/html" id="toolBar">
		<a class="layui-btn layui-btn-xs btnEdit" lay-event="edit" title="编辑"><i class="layui-icon">&#xe630;</i>编辑</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs btnDel" lay-event="del" title="删除"><i class="layui-icon">&#xe630;</i>删除</a>
	</script>

	<script type="text/html" id="statusTpl">
		<input type="checkbox" name="status" value="{{ d.id }}" lay-skin="switch" lay-text="正常|禁用" lay-filter="status" {{ d.status == 1 ? 'checked' : '' }} >
	</script>
	<script type="text/html" id="LAY-excel-export-ans">
		{{# layui.each(d.data, function(file_index, item){ }}
			<blockquote class="layui-elem-quote">{{d.files[file_index].name}}</blockquote>
			<div class="layui-tab">
			  <ul class="layui-tab-title">
				{{# var ii=0; layui.each(item, function(sheet_name, content) { }}
					<li class="{{ii == '0'?'layui-this':''}}">{{sheet_name}}</li>
				{{# ii++;}); }}
			  </ul>
			  <div class="layui-tab-content">
				{{# var ii=0; layui.each(item, function(sheet_name, content) { }}
					<div class="layui-tab-item {{ii == '0'?'layui-show':''}}">
						<button class="layui-btn layui-btn-normal btn-table-excel" id="btn-{{sheet_name}}">保存数据</button>
						<table class="layui-table" id="tableList-{{sheet_name}}">
							{{# layui.each(content, function(row_index, value) { }}
								{{# var col_index = 0 }}
									<tr>
									{{# layui.each(value, function(col_key, val) { }}
										<td id="table-export-{{file_index}}-{{sheet_name}}-{{row_index}}-{{col_index++}}" name="{{col_key}}">{{val}}</td>
									{{# });}}
									</tr>
							{{# });}}
						</table>
						<!--pre class="layui-code">{{JSON.stringify(content, null, 2)}}</pre-->
					</div>
				{{# ii++;}); }}
			  </div>
			</div>
		{{# }) }}
	</script>
</div>
</div>
</div>
<!-- 引入脚部 -->
<script src="/asset/layui/layui.js?v=1.0.0"></script>
<script src="/asset/js/common.js?v=1.0.0"></script>
<script type="text/javascript">
    layui.use(['func','excel','laytpl','element','code'], function () {
        //声明变量
        var func = layui.func;
		var $ = layui.$;
		var excel = layui.excel;
		var laytpl = layui.laytpl;
		var element = layui.element;
		
        var cols = [
            {type: 'checkbox'}
            , {field: 'id', width: 80, title: 'ID', align: 'center'}
            , {field: 'name', width: 180, title: '缴费名称', align: 'center'}
            , {field: 'dept', width: 130, title: '所属部门', align: 'center'}
            , {field: 'price', width: 120, title: '缴费金额', align: 'center'}
            , {field: 'status', width: 100, title: '状态', align: 'center', templet: '#statusTpl'}
            , {width: 180, title: '功能操作', align: 'center', toolbar: '#toolBar'}
        ];

        //【渲染TABLE】
        func.tableIns(cols, "tableList");
        //【设置弹框】
        func.setWin("缴费项目",900, 520);
        //【设置状态】
        func.formSwitch('status', null, function (data, res) {

        });
		
		/**
		 * 上传excel的处理函数，传入文件对象数组
		 * @param  {[type]} files [description]
		 * @return {[type]}       [description]
		 */
		function uploadExcel(files) {
		  layui.use(['excel', 'layer'], function () {
			var excel = layui.excel;
			var layer = layui.layer;
			try {
				excel.importExcel(files, {
					// 读取数据的同时梳理数据
					fields: {
						'stu': 'A' 		//学号
					  , 'username': 'B' //学生姓名
					  , 'feeMoney': 'C' //费用金额
					  , 'feeName': 'D'  //费用名称
					  , 'scoolName': 'E'//学校名称
					  , 'className': 'F'// 班级名称
					}
				}, function (data) {
					// 还可以再进行数据梳理
					//	data = excel.filterImportData(data, {'id': 'A'});
					// 如果不需要展示直接上传，可以再次 $.ajax() 将JSON数据通过 JSON.stringify() 处理后传递到后端即可
					layer.open({
						title: '文件转换结果'
						,area: ['1080px', '550px']
						,tipsMore: true
						,btn:[]
						,content: laytpl($('#LAY-excel-export-ans').html()).render({data: data, files: files})
						,success: function () {
							//	element.render('tab')
							//	layui.code({})
						}
					});
				})
			} catch (e) {
				layer.alert(e.message)
			}
		  })
		}
		
		$('#excelImport').change(function (e) {
			// 注意：这里直接引用 e.target.files 会导致 FileList 对象在读取之前变化，导致无法弹出文件
			var files = Object.values(e.target.files)
			uploadExcel(files)
			// 变更完清空，否则选择同一个文件不触发此事件
			e.target.value = ''
		});

		/*
        $('body').on("click", "#btn-Sheet1", function() {
            $(function(){
                var array = [],object;
                $("#tableList-Sheet1 tr").each(function(){
                    object = new Object();
                    var tdLength = $(this).children().length;
                    for(var i=0;i<tdLength;i++){
                        var currentTd = $(this).children()[i];
                        var propertyName = currentTd.getAttribute("name");
                        var value = currentTd.innerText;
                        object[propertyName] = value;
                    }
                    array.push(object);
                });
                console.log(array)
            });
            //layer.msg("提交成功");
            return false;
        });
        */

        $('body').on("click", ".btn-table-excel", function() {
            var obj = $(this);
            var id = $(obj).attr('id');
            var sheetName = id.slice(4);
            $(function(){
                var array = [],object;
                $("#tableList-"+sheetName+" tr").each(function(){
                    object = new Object();
                    var tdLength = $(this).children().length;
                    for(var i=0;i<tdLength;i++){
                        var currentTd = $(this).children()[i];
                        var propertyName = currentTd.getAttribute("name");
                        var value = currentTd.innerText;
                        object[propertyName] = value;
                    }
                    array.push(object);
                });
                array.shift();
                console.log(array)
            });
            //layer.msg("提交成功");
            return false;

		});


    });
</script>
</body>
</html>